<template>
  <view>
    <view class="follow-flex">
      <image src='https://pic.imgdb.cn/item/63de22654757feff33171a00.png' mode="" class="follow-img"></image>
      <view class="follow-text" :style="{color: color}">
        {{bodytext}}
      </view>
      <button @click="inSeeImg" size="default" class="follow-button">{{text}}</button>
    </view>
  </view>
</template>

<script>
  export default {
    name: "follow",
    props: {
      color: {
        type: String,
        default: ''
      },
      bodytext: {
        type: String,
        default: ''
      },
      text: {
        type: String,
        default: ''
      },
      url: {
        type: String,
        default: ""
      }
    },
    data() {
      return {

      };
    },
    methods: {
      inSeeImg() {
        uni.previewImage({
          current: this.url,
          urls: [this.url]
        });
      }
    }
  }
</script>

<style lang="scss">
  .follow-flex {
    display: flex;
    justify-content: space-around;
    font-size: 23rpx;

    .follow-img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
    }

    .follow-text {
      line-height: 45px;
      color: #000;
    }

    .follow-button {
      font-size: 10px;
      width: 77px;
      height: 25px;
      line-height: 25px;
      background-color: #008cff;
      border-radius: 100px;
      margin: 0;
      margin-top: 12px;
      color: #fff;
    }
  }
</style>
